<template>
    <div class="home">
        <!-- 头部数据模块 -->
        <ul class="header-ul">
            <li class="item">
                <p class="title">待审核团长（人）</p>
                <p class="num">{{dataIndex.siteNumber}}</p>
                <p style="padding-top:6px;">
                    <span style="padding-right:10px;">较昨日</span>
                    <span v-if="dataIndex.siteNumber>=dataIndex.siteNum">上涨</span>
                    <span v-else>下降</span>
                    <span style="padding-left:100px;">{{Math.abs((dataIndex.siteNumber-dataIndex.siteNum)/100).toFixed(2)}}%</span>
                </p>
            </li>
             <li class="item">
                <p class="title">待处理申述订单（笔）</p>
                <p class="num">{{dataIndex.orderNumber}}</p>
                <p style="padding-top:6px;">
                    <span style="padding-right:10px;">较昨日</span>
                    <span v-if="dataIndex.orderNumber>=dataIndex.orderNum" >上涨</span>
                    <span v-else>下降</span>
                    <span style="padding-left:100px;">{{Math.abs((dataIndex.orderNumber-dataIndex.orderNum)/100).toFixed(2)}}%</span>
                </p>
            </li>
        </ul>
        <div class="quick">
            <h3>快捷操作</h3>
            <ul>
                <li @click="gonotice">
                    <img src="../assets/img/index/announcement.png" alt="">
                    <span>发布通知公告</span>
                </li>
                <li @click="gofinancialComplaint">
                    <img src="../assets/img/index/order.png" alt="">
                    <span>处理申诉订单</span>
                </li>
                <!-- <li>
                    <img src="../assets/img/index/customer.png" alt="">
                    <span>在线客服</span>
                </li> -->
                <li @click="goafresidence">
                    <img src="../assets/img/index/audit.png" alt="">
                    <span>审核团长</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dataIndex:''
        }
    },
    mounted(){
        this.getIndex()
    },
    methods:{
        gofinancialComplaint(){
            this.$router.push('/index/financialComplaint')
        },
        gonotice(){
            this.$router.push('/index/notice')
        },
        goafresidence(){
            this.$router.push('/index/afresidence')
        },
        getIndex(){
            this.axios({
                url: '/index/getIndex',
                method: "get",
            }).then(res=>{
                this.dataIndex=res.data.data
                console.log('首页数据',this.dataIndex)
            })
        }
    },
    watch:{
        
    }
}
</script>

<style scoped>
/* 头部数据 */
.header-ul {
  padding: 10px 20px;
  display: flex;
  margin-top: 20px;
}
.header-ul li {
  width: 260px;
  margin-right: 40px;
  padding: 20px;
  color: #fff;
  border-radius: 2px;
  overflow: hidden;
  background: url("../assets/img/index/bg-1.png");
  background-size: 100% 100%;
}
.header-ul li:nth-child(2) {
  background: url("../assets/img/index/bg-2.png");
  background-size: 100% 100%;
}
.header-ul .num {
  font-size: 28px;
  min-height: 40px;
  margin-top: 20px;
}
.quick{
    margin-top: 50px;
}
.quick h3{
    font-size: 20px;
    color: #333;
    font-weight: 400;
}
.quick ul{
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    padding-top: 30px;
}
.quick ul li{
    font-size: 18px;
    color: #444;
    display: flex;
    align-items: center;
}
.quick ul li:first-child:hover{
    color: #FC8480;
}
.quick ul li:nth-child(2):hover{
    color: #F9BB4A;
}
.quick ul li:nth-child(3):hover{
    color: #09C49A;
}
.quick ul li:nth-child(4):hover{
    color: #118EE9;
}
.quick ul li img{
    width: 55px;
    margin-right: 13px;
}
</style>